<template>
  <div>

  	<myheader></myheader>
	

	<section class="featured-block text-center">
		<div class="container">
			<div class="row">
				<div class="col-md-6 text-center">
					<div class="product-image mt-3">
						<img class="img-fluid" :src="mysrc">
					</div>
					<div class="product-thumbnails">
						<!-- <video v-if="this.info_video"  id='video' width="15%" height="15%"  class="mt-2 mr-2 img-fluid" :src="'http://localhost:8000/static/upload/'+info_video"  controls='contros' autoplay='autoplay' muted loop='loop'></video> -->
						<a href="#" >
						<img @click="change_img(info.img)" class="mt-2 mr-2 img-fluid" :src="'http://localhost:8000/static/upload/'+info.img" >
						</a>
						<a href="#" v-for="imgs in info_imgs">
						<img @click="change_img(imgs)" class="mt-2 mr-2 img-fluid" :src="'http://localhost:8000/static/upload/'+imgs" >
						</a>

						</div>
				</div>
				<div class="col-md-6 mt-5 mt-md-2 text-center text-md-left">
					<h2 class="mb-3 mt-0">{{info.name}}</h2>
					<p class="lead mt-2 mb-3 primary-color">${{info.price}}.00</p>
					颜色：{{param.color}}
					尺寸：{{param.size}}
					<h5 class="mt-4">Description</h5>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus venenatis velit vestibulum massa sollicitudin auctor. Cras ac venenatis orci. Ut consequat, purus ut ultrices ultricies, nisi sem ornare quam, sed ultricies mi nisl sit amet purus.</p>
					<p>Suspendisse potenti. Nunc in libero luctus, sagittis leo sit amet, volutpat lacus. Quisque a porta risus. Integer aliquet nibh vitae vestibulum accumsan</p>
					<h5 class="mt-5">Care Instructions</h5>
					<p>Suspendisse cursus erat sed sem sagittis cursus. Etiam porta sem malesuada magna mollis euismod.</p>
					<select class="custom-select form-control mt-4 mb-4">
						<option selected>Size</option>
						<option value="1">Small</option>
						<option value="2">Medium</option>
						<option value="3">Large</option>
					</select>
					
					<!--Quantity: <input type="text" class="form-control quantity mb-4" name="" value="1">-->
					
					<a @click="add_to_cart" class="btn btn-full-width btn-lg btn-outline-primary">添加购物车</a>
					<div v-if="rep">
						<!-- 回复评论 -->
						<textarea rows="5" v-model="comment" v-autosize  v-wordcount='100' :placeholder="reply">
							
						</textarea>
						<Button color ='blue' @click="sub_comment">回复评论</Button>
					</div>
					<div v-else if ="uid">
						<!-- 商品评论 -->
						<textarea rows="5" v-model="comment" v-autosize  v-wordcount='100' >
							
						</textarea>
						<Button color ='blue' @click="submit">提交评论</Button>
					</div>

					<div>
						<!-- 评论区块 -->
						<!-- <ul> -->
						<table class = "com_table">
							<tr v-for=" i in comments">
								<td align = "left">
									<span v-for="uitem in users" v-if='uitem.id ==i.uid'>
									{{uitem.username}}
									</span>
									：{{i.content}}
									
								</td>
								<td><button @click="reply_comment(i.id,i.content)">回复</button></td>
								<td align = "left">
									<ul>
										<li v-for="reply in i.reply">
											<span v-for="uitem in users" v-if='uitem.id ==reply.uid'>
											{{uitem.username}}
											</span>
											：{{reply.content}}
										</li>
									</ul>
								</td>
							</tr>
						</table>
							<!-- <li v-for=" i in comments">
								<span v-for="uitem in users" v-if='uitem.id ==i.uid'>
									{{uitem.username}}
								</span>
								：{{i.content}}
								<button>回复</button>
								</li>
						</ul> -->
						<!-- <ul>
							<li v-for="i in comments">
								{{i.username}}：
								{{i.content}}
							</li>
						</ul> -->
					</div>
					</div>
			</div>
		</div>
	</section>
	
	<div class="divider"></div>
	
	<section class="products text-center">
		<div class="container">
			<h3 class="mb-4">Related Products</h3>
				<div class="row">
					<div v-for="item in goods_list" class="col-sm-6 col-md-3 col-product">
						<figure>
							
							<img class="rounded-corners img-fluid" :src="'http://localhost:8000/static/upload/'+item.img" 	width="240" height="240">
							
							<figcaption>
								
								<div class="thumb-overlay"><a :href="'http://localhost:8080/item/?id='+item.id" title="More Info">
									<i class="fas fa-search-plus"></i>
								</a></div>
								<Button color='blue' @click="into" class="video_button">画中画模式</Button>
							</figcaption>
						</figure>
						<h4><a :href="'http://localhost:8080/item/?id='+item.id">{{item.name}}</a></h4>
						<p><span class="emphasis">${{item.price}}.00</span></p>
					</div>
				</div>
				<div class="page_button">
					<Pagination  v-model="pagination" @change="currentChange" layout="pager" small></Pagination>
				</div>
		</div>
	</section>
	
	<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>
		
		
	</footer>	
    
  </div>
  
</template>


 
<script>
import myheader from './myheader.vue'

export default {
  data () {
    return {
	 // 评论内容
	 comment:'',
	  info_imgs:[],
	  info_video:'',
	  id:'',
	  msg: "这是一个变量",
	  goods_list:[],
	  info:{},
	  //商品规格
	  param:{},
	  mysrc:'',
	pagination:{
		page:1,
		size:4,
		total:0
	},
	  pagelist:[],
	  uid:"",
	  comments:[],
	  users:[],
	  rep:0,
	  // 输入框提示回复语
	  reply:'',
	  comment_id:0,
	  // 回复列表
	  reply_comments:[],
	  cart_list:[],
    }
  },
    // components注册组件 可以使用对应的标签来展示
  components: {
    myheader: myheader
  },
  mounted:function(){
	this.uid=localStorage.getItem('uid')
   this.id= this.$route.query.id
   console.log(this.id)
   this.get_goods_info()
   this.get_goods()
   this.get_comment()
   this.init_cart()
  
},
  methods:{
	//初始化购物车
	init_cart(){
		var cartdata= localStorage.getItem('cart')
		if(cartdata == null){
			this.cart_list =[]
		}else{
			this.cart_list = JSON.parse(cartdata)
		}
	},
	// 添加购物车
	add_to_cart(){
		// 默认购物车内没有改商品
		let findgood = 0
		for(let i=0;i<this.cart_list.length;i++){
			if(this.info.id == this.cart_list[i].id){
				this.cart_list[i]['num']++
				findgood = 1
				break
			}
		}
		if(findgood==0){
			this.cart_list.push({
				id :this.info.id,
				name:this.info.name,
				price:this.info.price,
				num:1,
				img:this.info.img
			})
		}
		// 写入localstorage 
		localStorage.setItem('cart',JSON.stringify(this.cart_list))
	},
	sub_comment(){
		this.axios.get('http://127.0.0.1:8000/myapp/repcomment/',{
			params:{cid:this.comment_id,uid:localStorage.getItem('uid'),content :this.comment}
		}).then(res=>{
			alert(res.data.msg)
		})
	},
	//回复评论
	reply_comment(cid,comment){
		this.reply = '回复评论：'+comment
		this.rep = 1
		console.log(cid)
		this.comment_id = cid
		return false

	},
	//获取评论
	get_comment(){
		this.axios.get('http://127.0.0.1:8000/myapp/commentinsert/',{
			params:{gid:this.id}
		}).then(res=>{
			console.log(res.data)
			var com_data=[]
			// 重新封装 评论数据
			for(let i=0;i<res.data.data.length;i++){
				com_data.push({
					id:res.data.data[i].id,
					uid:res.data.data[i].uid,
					content:res.data.data[i].content,
					reply:JSON.parse(res.data.data[i].reply),
					gid:res.data.data[i].gid,
				})
			}
			this.comments=com_data
			// this.comments=res.data.data
			this.users=res.data.udata
		})
	},
	// 提交评论
	submit(){
		if(this.comment==''){
			this.$Message('评论不能为空')
			return false
		}
		this.comment=this.comment.replace(/ /g,"")
		if(this.comment.length>100){
			this.$Message('超过长度限制')
			return false
		}
		// 请求入库
		// qs.stringify 将参数转为url参数
		var data=this.qs.stringify({
			username:localStorage.getItem('username'),
			gid:this.id,
			content :this.comment})
		console.log(data)
		this.axios.post('http://127.0.0.1:8000/myapp/commentinsert/',data).then(res=>{
			console.log(res.data)
			this.comments.unshift({'username':localStorage.getItem('username'),'content':this.comment,'gid':this.id})
			console.log(this.comments)
			this.$Message(res.data.msg)
		})

	},
	  //切换页数
	currentChange(value) {
	  console.log(value.cur, value.size);
	  	this.pagination.page=value.cur
		this.get_goods()
    },
	change_img(imgname){
		this.mysrc= 'http://localhost:8000/static/upload/'+imgname
		console.log(this.mysrc)
	},
	  	//画中画
    into:function(){
        var video =document.getElementById('video')
        if (video !== document.pictureInPictureElement) {
          // 尝试进入画中画模式
          video.requestPictureInPicture();    
          this.mymsg = '退出画中画';  
          } else {
          // 退出画中画
          document.exitPictureInPicture();
          this.mymsg = '进入画中画';
        }
    },
	//获取商品详情
	get_goods_info(){
		this.axios.get('http://127.0.0.1:8000/myapp/goodinfo/',{
			params:{id:this.id}
		}).then(res=>{
			console.log(res.data)
			this.info= res.data.data
			//类型转换
			this.param = JSON.parse(res.data.data.params)
			this.info_imgs = res.data.info_imgs
			this.info_video = res.data.info_video
			this.mysrc = 'http://localhost:8000/static/upload/'+res.data.data.img

		})
	},
	//获取商品
	get_goods(){
		this.axios.get('http://127.0.0.1:8000/myapp/goodslist/?page='+this.pagination.page+'&size='+this.pagination.size).then(res=>{
			this.goods_list=res.data.data
			this.pagelist = res.data.page_list
			this.pagination.total = res.data.total
		})
	},
     
  }
}


</script>
 
<style>
.video_button{
	margin-top: 190px;
	width: 95px;
	height: 30px;
	font-size: 2px;
}
.img-fluid{
	cursor: pointer;
}
.page_button{
    left: 50%;
    top: 50%;
    margin-left:45%;/*对应中间盒子宽度的一半*/
    margin-top:7%;/*对应中间盒子高度的一半*/

}
.com_table{
	margin-left: 150px;
}
</style>